<script lang="ts" setup>
import { Enum_IFormType } from '@/base-ui/form/index';
import MyForm from '@/base-ui/form/index'
import dayjs from 'dayjs';
import { ref } from 'vue';
import { ISearchFormConfig } from '.';

const props = withDefaults(
  defineProps<{
    searchFormConfig: ISearchFormConfig
  }>(),
  {}
)


const formConfigs = props.searchFormConfig.formConfig
// const formConfigs = ref([
//   {
//     span: 8,
//     child: {
//       type: Enum_IFormType.select,
//       modelKey: "executorSelect",
//       modelDefault: "all",
//       formItemProps: { label: "执行器：" },
//       formItemTagetProps: {
//         disabled: true,
//         options: [
//           {
//             value: 'all',
//             label: '全部',
//           }
//         ]
//       }
//     }
//   },
//   {
//     span: 8,
//     child: {
//       type: Enum_IFormType.select,
//       modelKey: "missionSelect",
//       modelDefault: "all",
//       formItemProps: { label: "任务：" },
//       formItemTagetProps: {
//         disabled: true,
//         options: [
//           {
//             value: 'all',
//             label: '全部',
//           }
//         ]
//       }
//     }
//   },
//   {
//     span: 8,
//     child: {
//       type: Enum_IFormType.select,
//       modelKey: "stateSelect",
//       modelDefault: "all",
//       formItemProps: { label: "状态：" },
//       formItemTagetProps: {
//         disabled: true,
//         options: [
//           {
//             value: 'all',
//             label: '全部',
//           }
//         ]
//       }
//     }
//   },
//   {
//     span: 16,
//     child: {
//       type: Enum_IFormType.datepicker,
//       modelKey: "datepickerModel",
//       modelDefault: ref([dayjs().subtract(1, "month"), dayjs()]),
//       formItemProps: { label: "运行日期：" },
//       formItemTagetProps: {
//         shortcuts: [
//           {
//             text: '一日内',
//             value: () => {
//               const start = dayjs().subtract(1, "day")
//               const end = dayjs()
//               return [start, end]
//             },
//           },
//           {
//             text: '一周内',
//             value: () => {
//               const start = dayjs().subtract(7, "day")
//               const end = dayjs()
//               return [start, end]
//             },
//           },
//           {
//             text: '一月内',
//             value: () => {
//               const start = dayjs().subtract(1, "month")
//               const end = dayjs()
//               return [start, end]
//             },
//           },
//           {
//             text: '一年内',
//             value: () => {
//               const start = dayjs().subtract(1, "year")
//               const end = dayjs()
//               return [start, end]
//             },
//           },
//         ],
//         type: "datetimerange",
//         rangeSeparator: "至",
//         startPlaceholder: "Start date",
//         endPlaceholder: "End date"
//       }
//     }
//   },
// ])


const modelKeys = formConfigs.map(it => ({ key: it.child.modelKey, defaultValue: it.child?.modelDefault }))
const initFormModelValue = {}
// 如果有默认值就用默认值，没有默认值就用 空字符串
for (let it of modelKeys) {
  initFormModelValue[it.key] = it.defaultValue ?? ""
}
// modelValue 必须要包裹响应式
const modelValue = ref(initFormModelValue)

</script>



<template>
  <el-row>
    <my-form :form-configs="formConfigs" v-model="modelValue">
      <template #footer="scope">
        <el-button style="margin-left: auto; margin-right: 10px;" type="primary">搜索</el-button>
      </template>
    </my-form>
  </el-row>
</template>



<style scoped>
</style>
